<template>
  <div class="purchase">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <header id="header" class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">买入购物劵</h1>
        </header>
        <div class="mui-content">
          <form class="mui-input-group content" @submit.prevent="purchase" :model="purchaseData">
            <div class="mui-input-row z-row" :class="{'is-danger':errors.has('money')}">
              <label>买入数额</label>
              <input
                name="money"
                v-model="purchaseData.remitFee"
                type="text"
                class="mui-input-clear"
                data-vv-as="买入数额"
                v-validate="'required|money'"
                @keyup="formatRmb"
                @keydown="formatRmb"
                placeholder="请输入需要买入的购物劵数额"/>
            </div>
            <span class="error-message" v-show="errors.has('money')">{{errors.first('money')}}</span>
            <div class="mui-input-row z-row">
              <label>充值金额</label>
              <input
                name="rmb"
                v-model="purchaseData.rmb"
                type="text"
                class="mui-input-clear"
                disabled
                placeholder="需要转账的金额"/>
            </div>
            <div class="mui-input-row mui-checkbox mui-left z-checkboxrow" style="color:#ee1f0e;font-size: 0.28rem">
              <div>转账时请备注上登录易销国际的手机号码以及姓名</div>
            </div>
            <div class="mui-input-row mui-checkbox mui-left z-checkboxrow">
              <div>提交并转账后，3个工作日内到账，节假日顺延</div>
            </div>
            <div class="mui-input-row mui-checkbox mui-left z-checkboxrow">
              <input name="protocolCheckbox" value="agree" type="checkbox" v-model="purchaseData.protocol">
              <label>同意</label><span class="z-protocol" v-tap="{method:toPage,params:'/protocol'}">《易销国际官方购买协议》</span>
            </div>
            <div class="mui-button-row z-row z-regbutton">
              <button
                id="loginBut"
                type="submit"
                class="mui-btn mui-btn-primary mui-btn-outlined"
                data-loading-text="提交中"
                data-loading-icon="mui-spinner mui-spinner-custom"
                :class="{'disabled':!purchaseData.protocol}"
                :disabled="!purchaseData.protocol">提交</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        purchaseData:{
          rmb:'',
          remitFee:'',
          protocol:'',
        },
        buyRate:1,
      }
    },
    mounted(){
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
      this.getParameter();
    },
    methods:{
      //购物劵转换人民币
      formatRmb(event){
        var remitFee = event.srcElement.value;
        this.purchaseData.rmb = this.buyRate * remitFee;
      },
      //页面跳转
      toPage(path){
        this.$router.push(path);
      },
      //提交申请
      purchase(){
        var that = this;
        that.$validator.validate().then((result)=>{
          if(result){
            mui("#loginBut").button('loading');
            that.$http.post(that.$http.adornUrl(that.$api.purchase),{
              remitFee:that.purchaseData.remitFee,
            }).then(function(res){
              mui.toast(res.errmsg);
              if(res.errno == 0){
                mui.alert("操作成功,请尽快转账以免影响进度","提示","确认",function(){
                  //that.$router.replace('/xiaoxiao');
                  that.$router.go(-1);
                });
              }else{
                mui("#loginBut").button('reset');
              }
            }).catch(function (err) {
              mui.toast("执行失败请重试");
              mui("#loginBut").button('reset');
              console.log(err);
            });
          }
        });
      },
      //得到购物劵转人民币的汇率
      getParameter(){
        var that = this;
        return new Promise(function (resolve, reject) {
          that.$http.post(that.$http.adornUrl(that.$api.getParameter), {
            "parameter":"buy_rate",
          }).then(function(res){
            mui.toast(res.errmsg);
            if(res.errno == 0){
              that.buyRate=res.data["parameter_value"];
              resolve();
            }else{
              reject("执行失败请重试");
            }
          }).catch(function (err) {
            console.log(err);
            reject("执行失败请重试");
          });
        })
      },
    }
  }
</script>

<style scoped lang="less">
  .purchase{
    .mui-scroll-wrapper{
      background-color: #fff;
    }
    .mui-bar{
      background-color: #fff;
      .mui-title{
        font-size: 0.36rem;
      }
    }
    .mui-bar-nav {
      -webkit-box-shadow: 0 1px 6px #e6e6e6;
      box-shadow: 0 1px 6px #e6e6e6;
    }
    .mui-input-group:after{
      height: 0px;
    }
    .mui-input-group:before{
      height: 0;
    }
    .mui-input-group .mui-input-row:after{
      height: 0px;
    }
    .content{
      padding:1.1rem 0.3rem 0 0.3rem;
      .z-row{
        height:0.8rem;
        margin-bottom:0.36rem;
        border:1px solid #ccc;
        border-radius: 0.1rem;
        label{
          font-size: 0.3rem;
          line-height: 0.8rem;
          padding:0 15px;
          width: 30%;
          border-right: 1px solid #ccc;
        }
        input{
          font-size: 0.3rem;
          height: 0.8rem;
          line-height: 0.8rem;
          width:70%;
          float: left;
          padding-left: 0.2rem;
        }
      }
      .z-checkboxrow{
        height:0.5rem;
        font-size: 0.2rem;
        input[type=checkbox]{
          height:0.35rem;
          line-height: 0.35rem;
          top:0;
          left:0;
          margin-top:0.06rem;
        }
        input[type=checkbox]:before{
          font-size: 0.35rem;
        }
        label{
          height:0.5rem;
          line-height: 0.5rem;
          padding:0 0 0 0.4rem;
          color:#000;
          width:1rem;
        }
        .z-protocol{
          display: inline-block;
          float: none;
          color:#007aff;
        }
      }
      .z-regbutton{
        margin-bottom:0;
        padding-top: 0px;
        border:0;
        button{
          width:100%;
          height:100%;
          border-radius: 0.2rem;
        }
        .disabled{
          color:#333;
          border:1px solid #333;
        }
      }
      .is-danger{
        border:1px solid red;
        margin-bottom:0;
      }
      .error-message{
        font-size: 0.18rem;
        color:red;
      }
    }
  }
</style>
